<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<style type="text/css">
			/*元素选择器作用于
			1、编辑默认样式
			2、定义全局样式*/
			a{
				text-decoration: none;
			}
			.buy_btn{
				display: inline-block;
				width: 80px;
				padding: 4px 0;
				border: 1px solid #333;
				font-size: 20px;
				color: #ef4238;
				text-align: center;
			}
			/*a标签4种状态,正确顺序
			1、link     链接未访问状态
			2、hover    鼠标悬停状态
			3、active   鼠标点击状态
			4、visited  链接被访问过状态
			正确顺序：1423（lvha）
			*/
			/*当鼠标悬停在上面时，改变样式*/
			.buy_btn:hover{
				color: #fff;
				background-color: #ef4238;
			}
			/*当鼠标点击时，改变样式*/
			.buy_btn:active{
				color: #3a3333;
				background-color: pink;
			}
			/*当被鼠标点击过后，改变样式*/
			/*.buy_btn:visited{
				color: darkgoldenrod;
				background-color: greenyellow;
			}*/
			.ipt{
				color: #000;
			}
			
			/*输入框得到焦点后，改变样式*/
			.ipt:focus{
				color: red;
			}
		</style>
		<a href="#" class="buy_btn">购票</a>
		<input type="text" class="ipt" value="66666666666666"/>
		<style type="text/css">
			
			.line>li:first-child{
				background-color: #000000;
			}
			.line>li:nth-child(2n){
				background-color: #FFFFFF;
			}
			.line>li:nth-child(2n-1){
				background-color: #000000;
			}
			/*匹配第一个li*/
			.line>li:first-of-type{
				background-color: pink;
			}
			/*使用！important无视后者样式,万不得已不要滥用*/
			.line>li:nth-of-type(4){
				background-color: palegreen!important;
			}
			
			.line>li:nth-of-type(4){
				background-color: peru;
			}
			.line>p:only-child{
				background-color: blue;
			}
			html:root{
				text-align: center;
			}
			
		</style>
		<!--
			ele:first-child()//匹配首位
			ele:last-child()//匹配末位
			ele:nth-child() 优先匹配位置及元素
			**位置要对，标签要对**
			先匹配位置，再匹配标签
			如果当前位置的标签不对
			则不会应用样式
			
			表示类型的状态
			ele:nth-of-type() 优先类型及出现顺序
			ele:first-of-type
			ele:last-of-type
			
			ele:nth-child()优先匹配位置及元素
			ele:nth-of-type()优先匹配类型及出现顺序
			
		-->
		<ul class="line">
			<p>斑马线1</p>
			<li>斑马线2</li>
			<li>斑马线3</li>
			<li>斑马线4</li>
			<li>斑马线5</li>
			<li>斑马线6</li>
			<li>斑马线7</li>
			<li>斑马线8</li>
			<li>斑马线9</li>
			<li>斑马线10</li>
		</ul>
	</body>
</html>
